<template>
    <div ref="ganttChart" style="width: 100%; height: 500px"></div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import gantt from 'dhtmlx-gantt'

    // 甘特图数据
    const ganttData = [
        {
            id: 1,
            text: '需求梳理',
            start_date: '2023-05-12 00:00',
            end_date: '2023-05-13 00:00',
            actual_start_date: '2023-05-12 00:00',
            actual_end_date: '2023-05-13 00:00',
            taskOwner: '王喆',
            status: '延期完成',
            progress: 0.5,
            plan: 'default', // 用于区分计划状态
            actual: 'daily' // 用于区分实际状态
        }
    ]

    const ganttChart = ref(null)

    onMounted(() => {
        // 配置甘特图
        gantt.config.columns = [
            { name: 'text', label: '任务', width: 200 },
            { name: 'start_date', label: '计划开始', align: 'center' },
            { name: 'end_date', label: '计划结束', align: 'center' },
            { name: 'actual_start_date', label: '实际开始', align: 'center' },
            { name: 'actual_end_date', label: '实际结束', align: 'center' },
            { name: 'taskOwner', label: '负责人', align: 'center' },
            { name: 'status', label: '状态', align: 'center' }
        ]

        gantt.config.scale_unit = 'month' // 选择甘特图的显示尺度
        gantt.config.date_scale = '%F, %Y' // 月份和年份格式

        gantt.config.scale_height = 50 // 设置刻度线的高度
        gantt.config.row_height = 30 // 设置任务行的高度

        gantt.init(ganttChart.value)

        // 解析数据
        gantt.parse({
            data: ganttData.map(task => ({
                id: task.id,
                text: task.text,
                start_date: task.start_date,
                end_date: task.end_date,
                actual_start_date: task.actual_start_date,
                actual_end_date: task.actual_end_date,
                task_owner: task.taskOwner,
                status: task.status,
                progress: task.progress,
                custom_class: task.plan === 'default' ? 'plan-green' : 'plan-red'
            }))
        })

        // 自定义任务样式
    })
</script>

<style scoped>
    /* 计划任务绿色 */
    .plan-green {
        background-color: green;
    }
    /* 实际任务红色 */
    .plan-red {
        background-color: red;
    }
</style>
